<template>
  <div class="hah">
    <Row type="flex">
      <Col flex="800px"> <h2 class="title2">当前生效期内 <i>{{ config.page.total }}</i></h2></Col>
      <Col flex="350px"></Col>
    </Row>

    <Table
        :columns="config.columns"
        :row-key="record => record.id"
        :data-source="config.list"
        :pagination="config.page"
        :loading="config.loading"
        @change="(pagination)=> changeHandler(pagination, config)"
        bordered
    >
      <template #indexSlot="{ index }">{{(config.page.current-1)*10+index+1}}</template>

      <template #name="{ text,record }">
        <p class="mb0">
          <router-link  target="_blank" :to="{path:`/company/${record.punishTargetId}`}" class="blue">{{ text }}</router-link>
        </p>
        <p class="mb0 gray6">{{record.punishTargetCode}}</p>
      </template>

      <template #date="{ text,record }">
        <p class="mb0">因{{ record.punishReason }}，{{ parseTime(record.punishStartDate)}} ~ {{ parseTime(record.punishEndDate)}}期间内，不受理企业“<span class="orange">{{text}}</span>”资质申报业务</p>
      </template>

      <template #punishOrgan="{ text,record }">
        <p class="mb0">{{text}}</p>
        <p class="mb0">{{ parseTime(record.punishDate)}}</p>
      </template>



      <template #detail="{ text , record }">
        <span class="blue pointer" @click="openDetail(record)">详情</span>
      </template>

    </Table>
    <Modal v-model:visible="visible" :width="900" title="行为限制信息详情"
           :footer="null" :centered="true">
      <detail :detail="recordDetail"/>
    </Modal>
  </div>

</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from 'vue';
import {Row, Col, Table, Input, Select, Button, Modal, Descriptions,} from 'ant-design-vue';
import { getPersonLimitApi  } from '/@/api/staff';
import { parseTime } from '/@/utils';
import detail from './detail.vue';

const columns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  {
    title: "限制主体",
    width: 250,
    dataIndex: "punishTargetName",
    //slots: { customRender: "name"}
  },
  /*{
    title: "限制内容",
    dataIndex: "limitAptName",
    width: 480,
    slots: { customRender: "date"}
  },*/
  {
    title: "限制说明",
    dataIndex: "procExplain",
    width: 480,
  },



  {
    title: "处罚机关/日期",
    dataIndex: "punishOrgan",
    width: 200,
    slots: { customRender: "punishOrgan"}
  },
  {
    title: "操作",
    dataIndex: "procExplain",
    width: 100,
    slots: { customRender: "detail"}
  }
]

export default defineComponent({
  components: {
    Table , Row, Col, Input, Button, Select, Option: Select.Option,
    Modal,Descriptions,DescriptionsItem:Descriptions.Item,detail
  },
  setup() {
    const personId = inject('personId') as string;
    const visible = ref<boolean>(false);
    const recordDetail = ref<any>()

    const config = reactive({
      columns: columns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1
      }
    })


    const openDetail = data =>{
      recordDetail.value = data
      visible.value = true;
    }

    const changeHandler = (pagination, config) => {
      const { current } = pagination;
      let { loading, list, page } = toRefs(config);
      loading.value = true;
      getPersonLimitApi( 'yes',{ personId, current }).then( ({ data,success } ) => {
        if(success){
          let { records, current, total } = data;
          list.value = records;
          loading.value = false;
          page.value = {current, total};
        }
      })
    }



    const init = () => {
      changeHandler({current: 1}, config);
    }

    onMounted(init)

    return {
      config, changeHandler  ,visible ,recordDetail , parseTime,openDetail
    }
  },
})
</script>

<style lang="less" scoped>

.ant-col{
  padding-top: 16px;
  margin-bottom: 8px;
}

.ant-select ,.ant-btn{
  width: 100%;
}

.ant-col.text-right{
  padding-right: 0 !important;
}

</style>
